<template>
	<view class="animated" v-show="keyboardShow" @tap="close">
		<!-- 遮罩 -->
		<view class="keyboard-mask"></view>
		<!-- 键盘box -->
		<view class="keyboard" @tap.stop="">
			<!-- 顶部操作栏 -->
			<view class="keyboard-header">
				<view class="keyboard-input">{{ input.join('') }}</view>
				<view v-if="input.length" style="display: inline-block; margin-left: 20upx;" class="text-gray text-xs">({{ input.length }}位)</view>
				<view class="keyboard-handler" @tap.stop="delTap">
					<text>删除</text>
				</view>
			</view>
			<!-- 输入控件 -->
			<view class="keyboard-content">
				<view class="line" v-for="(line, lineIndex) in list" :key="lineIndex"
					:style="{ paddingTop: minWidth + 'px' }"
				>
					<view @tap.stop="keyTap(key)" class="key" :class="(key=='I' || key=='O')?'disabled':((key=='豫' || key=='Q')?'bgorange':'')" v-for="(key, index) in line" :key="index"
						:style="{ 
							height: keyWidth * proportion + 'px',
							maxWidth: keyWidth + 'px',
							width: keyWidth + 'px',
							marginRight: minWidth + 'px'
						}"
					>{{ key }}</view>
				</view>
			</view>
			<!-- 完成按钮 -->
			<view @tap="over" class="key-float key-over" :style="{ height: keyWidth * proportion + 'px', width: keyWidth * 3/2 + 'px', right: minWidth + 'px' }">完成</view>
			<!-- 切换按钮 -->
			<view v-if="convert" @tap="convertKeyboard" class="key-float key-change" :style="{ height: keyWidth * proportion + 'px', width: keyWidth * 3/2 + 'px', left: minWidth + 'px' }">{{TypeText}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				required: true,
			},
			value: {
				required: true,
			},
			defaultType: {
				required: false,
				default: 0,
			},
			convert: {
				required: false,
				default: true,
			}
		},
		data() {
			return {
				keyboardShow: false,
				input: [],
				width: 0,
				height: 0,
				//按钮与空白的比例
				ratio: 7,
				type: 0,
				TypeText:'ABC',
				typeList: [
					{ name: '车架号键盘', max: 10, list: [
						'1234567890',
						'QWERTYUIOP',
						'ASDFGHJKL',
						'ZXCVBNM',
					] },
					{ name: '车牌号键盘', max: 10, list: [
						"京沪浙苏粤鲁晋冀豫川",
						"渝辽吉黑皖鄂津贵云桂",
						"琼青新藏蒙宁甘陕闽赣",
						"湘使领警学港澳",
					] },
				]
			};
		},
		watch: {
			show(show) {
				this.changeShow(show);
			}
		},
		computed: {
			//按钮 高:宽 占比
			proportion(){
				return 4 / 3;
			},
			minWidth(){
				return this.width / (this.max * this.ratio + this.max + 1);
			},
			keyWidth() {
				return this.minWidth * this.ratio; 
			},
			typeInfo(){
				return this.typeList[this.type];
			},
			list(){
				return this.typeInfo.list;
			},
			max(){
				return this.typeInfo.max;
			}
		},
		methods: {
			// 切换键盘
			convertKeyboard() {
				if(this.typeList.length - 1 === this.type){
					this.type = 0
					this.TypeText="省份";
				}else{
					this.type += 1;
					this.TypeText="ABC";
				}
			},
			// 改变键盘的显示与隐藏
			changeShow(show){
				if(show){
					uni.hideTabBar()
					this.type = this.defaultType;
					this.input = this.value.split('');
				}else{
					uni.showTabBar();
				}
				this.keyboardShow = show;
			},
			// 键盘点击
			keyTap(key){
				if(key=="I" || key=="O"){
					return;
				}
				this.input.push(key);
				if(this.type!=0){
					this.convertKeyboard();
				}
				this.$emit('submit', this.input.join(''));
			},
			delTap(){
				this.input.pop();
				this.$emit('submit', this.input.join(''));
			},
			over(){
				this.$emit('submit', this.input.join(''));
				this.close();
			},
			close(){
				this.$emit('close', false);
			},
		},
		mounted() {
			const { windowWidth, windowHeight } = uni.getSystemInfoSync();
			this.width = windowWidth;
			this.height = windowHeight;
			
			this.changeShow(this.show);
		}
	}
</script>

<style lang="scss">
	@keyframes blink{
		0%{
			opacity: 0;
		}
		50%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}
	@keyframes bottom {
	    0% {
	        opacity: 0;
	        transform: translateY(100%)
	    }
	
	    100% {
	        opacity: 1;
	        transform: translateY(0)
	    }
	}
	.animated {
		animation-name: bottom
	}
		
	@mixin flex-center{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.text-gray{
		color: #aaaaaa;
	} 
	.text-xs{
		font-size: 24upx;
	}
	
	.keyboard-mask{
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: rgba($color: #FFF, $alpha: 0.1);
	}
	
	.keyboard {
		position: fixed;
		z-index: 100;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1px solid #D9DADB;
		color: #070809;
		
		&-header{
			border-bottom: 1px solid #E0E1E2;
			background-color: #FEFFFF;
			padding: 6px 12px;
		}
		&-input{
			display: inline-block;
			min-width: 200upx;
			border-bottom: 1px solid #CCC;
			padding: 0 6px;
			
			&:after{
				color: #39B54A;
				content: '|';
				animation: blink 1s infinite;
			}
		}
		&-handler{
			float: right;
			font-size: 28upx;
			margin-top: 0upx;
			color: #3284C6;
			&:active{
				opacity: 0.8;
			}
		}
		&-content{
			background-color: #D1D6D9;
			padding-bottom: 10upx;
			
			.line{
				@include flex-center;
			}
			
			.key{
				@include flex-center;
				background-color: #FCFFFF;
				box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1);
				border-radius: 6upx;
			}
			.key:last-child{
				margin-right: 0 !important;
			}
			.key:active{
				opacity: 0.8;
			}
			.disabled{
				background-color: #e3e2e2;
				color:#a5a5a5;
			}
		}
		.key-float{
			position: absolute;
			right: 6upx;
			bottom: 10upx;
			@include flex-center;
			box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1);
			border-radius: 6upx;
		}
		.key-float:active{
			opacity: 0.8;
		}
		.key-over{
			background-color: #EB7141;
			color: #FFF;
		}
		.key-change{
			background-color: #FCFFFF;
			color: #AAAAAA;
			font-size: 28upx;
		}
	}
	.bgorange{background-color: #3598fc !important; color:#ffffff;}
</style>
